<template>
  <div>
    <header-title :header-title="title" />
    <order-form @on-success-valid="handleSubmit" />
    <order-dialog
      :dialog-visible="visible"
      @cancel-dialog="handleCancelDialog"
      @confirm-dialog="handleConfirmDialog"
    />
    <depature-manage-dialog
      :row="row"
      :dialog-visible="depatureManageVisible"
      @cancel-dialog="handleCancelDepature"
      @confirm-dialog="handleConfirmDepature"
    />
    <car-manage-dialog
      :row="row"
      :dialog-visible="carManageVisible"
      @cancel-dialog="handleCancelCar"
      @confirm-dialog="handleConfirmCar"
    />
    <confirm-dialog
      :dialog-visible="confirmVisible"
      @cancel-dialog="handleCancel"
      @confirm-dialog="handleConfirm"
    />
    <el-button
      type="primary"
      style="margin-bottom: 10px"
      @click="handleClick"
    >新增订单</el-button>
    <page-table
      :table-data="OrderTableData()"
      :page-title="title"
      @handle-click="handleView"
    />
    <pagination
      :total="OrderDataCount()"
      @click-page="handleClickPage"
      @change-pagesize="handleSizeChange"
    />
  </div>
</template>
<script>
import HeaderTitle from '@/components/HeaderTitle'
import PageTable from '@/components/PageTable'
import OrderForm from '@/components/OrderForm'
import Pagination from '@/components/Pagination'
import OrderDialog from '@/components/OrderDialog'
// import OrderManageDialog from '@/components/OrderManageDialog'
import DepatureManageDialog from '@/components/DepatureManageDialog'
import CarManageDialog from '@/components/CarManageDialog'
import ConfirmDialog from '@/components/ConfirmDialog'
import mixin from '@/mixin/mixin'
export default {
  components: {
    HeaderTitle,
    PageTable,
    OrderForm,
    Pagination,
    OrderDialog,
    DepatureManageDialog,
    CarManageDialog,
    ConfirmDialog
  },
  mixins: [mixin],
  data() {
    return {
      title: '订单管理',
      row: {},
      visible: false,
      depatureManageVisible: false,
      carManageVisible: false,
      confirmVisible: false,
      btnTitle: ''
    }
  },
  mounted() {
    this.getOrderData({})
  },
  methods: {
    handleSubmit(playload) {
      console.log(playload)
    },
    handleClick() {
      this.btnTitle = 'add'
      this.visible = true
    },
    handleView(row) {
      this.btnTitle = 'view'
      let newRow = {}
      if (row.id) {
        newRow = { ...row }
      }
      this.row = newRow
      if (row.state === 0) {
        this.depatureManageVisible = true
      } else if (row.state === 1) {
        this.carManageVisible = true
      }
    },
    handleClickPage(page) {
      console.log(page)
    },
    handleSizeChange(pagesize) {
      console.log(pagesize)
    },
    handleCancelDialog() {
      this.visible = false
    },
    handleConfirmDialog(playload) {
      console.log(playload)
      this.confirmVisible = true
      this.visible = false
    },
    handleCancelDepature() {
      this.depatureManageVisible = false
    },
    handleConfirmDepature(playload) {
      console.log(playload)
      this.depatureManageVisible = false
      this.confirmVisible = true
    },
    handleCancelCar() {
      this.carManageVisible = false
    },
    handleConfirmCar(playload) {
      console.log(playload)
      this.carManageVisible = false
      this.confirmVisible = true
    },
    handleCancel() {
      this.confirmVisible = false
      if (this.btnTitle === 'view') {
        this.manageVisible = true
      } else if (this.btnTitle === 'add') {
        this.visible = true
      }
    },
    handleConfirm() {
      this.confirmVisible = false
    }
  }
}
</script>

